<template>
  <div class="right-panel">
    <div class="info">
      <!-- <el-badge :value="state.notReadTotal" @click="clickInfo">
        <svg-icon name="xiaoxi" size="20px" :color="color"></svg-icon>
      </el-badge> -->
    </div>
    <FullScreen :color="color" @refresh="onRefresh" class="refresh"></FullScreen>
    <UserInfo :color="color" />
  </div>
</template>

<script>
export default {
  name: 'RightPanel',
};
</script>

<script setup>
import { computed, defineProps, onMounted, reactive } from 'vue';
import { getUserReadNumApi } from '@/api/interface/personCenter.js'
import { useStore } from 'vuex';
import { useRouter } from "vue-router";
const store = useStore();
const router = useRouter();
defineProps({
  color: {
    type: String,
    default: '#fff',
  },
});

const state = reactive({
  notReadTotal: 0
})

onMounted(() => {
  // getUserReadNum()

})

//获取用户阅读消息数
const getUserReadNum = () => {
  getUserReadNumApi().then(res => {
    const { status, data } = res
    if (status === 200) {
      state.notReadTotal = data.notReadTotal

    }

  })

}

//点击消息icon，进入消息
const clickInfo = () => {
  router.push({ name: 'PersonCenter', query: { type: 2 } }).catch(() => { });
}



const onRefresh = () => { };


</script>

<style lang="scss" scoped>
.right-panel {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: flex-end;
  height: $base-nav-bar-height;
  .el-badge {
    cursor: pointer;
  }
  .refresh {
    margin: 0 40px;
    cursor: pointer;
  }
  :deep(.el-badge__content.is-fixed) {
    right: calc(1px + var(--el-badge-size) / 3) !important;
    top: 13px !important;
  }
}
</style>
